<template>
  <div class="inner-container" >
    <hr>
    <div class="section-title">基本信息</div>
    <hr>
    <!-- --------------------------------------------------详情表单-------------------------------------------------------- -->
    <el-form label-width="80px" label-position="left" :model="customerData">
      <el-row :gutter="10">
        <el-col :span="5" >
          <el-form-item label="客户编号" prop="id">
            <el-text>{{ customerData.id }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5" :model="ordersData">
          <el-form-item label="订单编号" prop="orderNumber">
            <el-text>{{ ordersData.orderNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户状态" prop="status">
            <el-text v-if="customerData.status == 10">未订单客户—一客到店</el-text>
            <el-text v-else-if="customerData.status == 20" style="color:#FF9900;">未订单客户—二客到店</el-text>
            <el-text v-else-if="customerData.status == 30" style="color:#FF9900;">未订单客户—多客到店</el-text>
            <el-text v-else-if="customerData.status == 40" style="color:#FF9900;">订单客户—转单中</el-text>
            <el-text v-else-if="customerData.status == 50" style="color:#FF9900;">订单客户—已完成</el-text>
            <el-text v-else-if="customerData.status == 60" style="color:#FF9900;">订单客户—退/死单</el-text>
            <el-text v-else-if="customerData.status == 70" style="color:#FF9900;">待量房客户</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户类型" prop="type">
            <el-text v-if="customerData.type == 10">现房客户</el-text>
            <el-text v-else="customerData.type == 20">期房客户</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户姓名" prop="name">
            <el-text>{{ customerData.name }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户性别" prop="gender">
            <text v-if="customerData.gender == 1">男</text>
            <text v-else="customerData.gender==0">女</text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="年龄" prop="age">
            <el-text>{{ customerData.age }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-text>{{ customerData.contactPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="身份证号" prop="idNumber">
            <el-text>{{ customerData.idNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="紧急电话" prop="emergencyPhone">
            <el-text>{{ customerData.emergencyPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系人" prop="emergencyContact">
            <el-text>{{ customerData.emergencyContact }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="楼盘名称" prop="propertyName">
            <el-text>{{ customerData.propertyName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="户型" prop="houseType">
            <el-text>{{ customerData.houseType }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="面积" prop="houseSize">
            <el-text>{{ customerData.houseSize }}平方米</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form label-width="80px" label-position="left" :model="customerData" ref="formRef">
        <el-row>
          <el-col>
            <el-form-item label="楼盘名称" prop="city">
              <el-text style="width: 60px">{{ customerData.city }}</el-text>
              <el-text style="width: 70px">{{ customerData.district }}</el-text>
              <el-text>{{ customerData.propertyAddr }}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-form>

    <hr>
    <div class="section-title">定金信息</div>
    <hr>
    <el-form label-width="80px" label-position="left" :model="DepositData">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="录入时间" prop="collectionTime">
            <el-text>{{ DepositData.collectionTime }}</el-text>
            <el-text v-if="DepositData.collectionTime==null">待录入</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="定金金额" prop="depositAmount">
            <el-text v-if="DepositData.depositAmount==null">待录入</el-text>
            <el-text v-else>{{ DepositData.depositAmount }}元</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="付款方式" prop="paymentMethod">
            <text v-if="DepositData.paymentMethod == 10">微信</text>
            <text v-else-if="DepositData.paymentMethod==20">支付宝</text>
            <text v-else-if="DepositData.paymentMethod==30">银行卡/信用卡</text>
            <text v-else-if="DepositData.paymentMethod==40">先现金</text>
            <text v-else="DepositData.paymentMethod==null">待录入</text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" >
        <el-col :span="5" >
          <el-form-item label="付款凭证" prop="paymentVoucher">
            <el-text v-if="DepositData.paymentVoucher==null">待录入</el-text>
            <el-text v-else><img :src="DepositData.paymentVoucher" style="width: 130px; height: 100px"></el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="录入人" prop="recipient">
            <el-text v-if="DepositData.recipient==null">待录入</el-text>
            <el-text v-else>{{ DepositData.recipient }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <hr>
    <div class="section-title">工程订单信息</div>
    <hr>
    <el-form label-width="90px" label-position="left">
      <el-row :gutter="45" >
        <el-col :span="5">
          <el-form-item label="录入设计费" prop="propertyName" >
            <el-input v-model="saveEngineering_managementForm.depositAmount"  style="width: 150px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="基础施工费" prop="propertyName">
            <el-input v-model="saveEngineering_managementForm.construct"  style="width: 100px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col>
          <el-form-item label="合同附件">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="engineeringManagementImageUrl"
                name="file"
                limit="4"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="engineering_managementAdd">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script setup>

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

const router = useRouter();


//客户表
const customerData = ref({
  id:undefined,
  type:undefined,
  name:undefined,
  gender:undefined,
  age:undefined,
  contactPhone:undefined,
  idNumber:undefined,
  emergencyPhone:undefined,
  emergencyContact:undefined,
  propertyName:undefined,
  houseType:undefined,
  houseSize:undefined,
  province:undefined,
  city:undefined,
  district:undefined,
  propertyAddr:undefined,
  status:undefined,
})


const id = new URLSearchParams(window.location.search).get('id');
//进入页面回显数据
const selectCustomer = () => {
  request.get('/api/crm/deposit/selectById/'+id).then((res) => {
    customerData.value = res.data;
    console.log(res.data);
  })
}
const ordersData = ref({
  orderNumber:undefined,
})
const tableOrdersData = () => {
  request.get('/api/crm/deposit/selectOrdersById/'+id).then((res) => {
    ordersData.value = res.data;
    console.log(res.data);
  })
}

const DepositData = ref({
  collectionTime:undefined,
  depositAmount:undefined,
  paymentMethod:undefined,
  paymentVoucher:undefined,
  customerId:undefined,
  followUpResults:undefined,
  recipient:undefined,
})


const selectDepositById =()=>{
  request.get('/api/crm/deposit/selectDepositById/'+id).then((res)=>{
    DepositData.value=res.data;
    console.log(res.data);
  })
}


/**图片上传相关代码结束**/


/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const engineeringManagementImageUrl = ref(BASE_URL+'/api/file/upload');0
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  request.post(BASE_URL+'/api/file/remove?url='+imgUrl).then(res => {
    ElMessage.success('删除成功')
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile.url);
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/


const saveEngineering_managementForm = ref({
  depositAmount: undefined,
  construct: undefined,
  customerId: id,
})
const engineering_managementAdd = () => {
  if (fileList.value.length == 0) {
    ElMessage.error('请上传合同附件');
    return;
  }
  saveEngineering_managementForm.value.annexContract = fileList.value[0].response.data;
  saveEngineering_managementForm.value.ordersId = ordersData.value.id;
  console.log(saveEngineering_managementForm.value);
  console.log(fileList.value[0].response.data);
  request.post('/api/crm/engineering_management/insert',saveEngineering_managementForm.value).then((res) => {
    ElMessage.success("录入成功");
    router.push('/crm/project_order');
  })


}
onMounted(() => {
  selectCustomer();
  tableOrdersData();
  selectDepositById();
  tableOrdersData();
})

</script>


<style scoped>

</style>